<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>批量导入数据</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <el-upload
                    class="upload-demo"
                    drag
                    name="file"
                    :on-success="upsuccess"
                    ref="file"
                    action="http://127.0.0.1:8081/student/getExcelData"
                    multiple
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将表单文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">只能上传 excle 文件,<a href="http://127.0.0.1:8081/file/demo.xls" download="demo.xls">点击下载模板</a></div>
                </template>
            </el-upload>




        </div>
    </div>
</template>

<script>
    import VueCropper from "vue-cropperjs";
    import "cropperjs/dist/cropper.css";
    export default {
        name: "upload",
        data() {
            return {
                defaultSrc: require("../assets/img/img.jpg"),
                fileList: [],
                imgSrc: "",
                cropImg: "",
                dialogVisible: false
            };
        },

        methods: {
            upsuccess(response, file, fileList){
                console.log(response, file, fileList)
                if(response.state){
                    if(response.data!=null){
                        this.$message.warning("部分导入失败，详情见日志");
                        this.downloadTxt(JSON.stringify(response),this.farmat(new Date(),"yyyy_MM_dd_hh_mm_ss_S")+"_log.txt")
                    }else{
                        this.$message.success("导入成功，");
                    }
                }else{
                    this.downloadTxt(JSON.stringify(response),this.farmat(new Date(),"yyyy_MM_dd_hh_mm_ss_S")+"_log.txt")
                    this.$message.error("导入失败，详情见日志");
                }
            },
            farmat (date,fmt) { //author: meizz
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },


            downloadTxt(text, fileName){
                let element = document.createElement('a')
                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
                element.setAttribute('download', fileName)
                element.style.display = 'none'
                element.click()
            },
            handleError() {
                this.$notify.error({
                    title: "上传失败",
                    message: "图片上传接口上传失败，可更改为自己的服务器接口"
                });
            }
        },
        created() {
            this.cropImg = this.defaultSrc;
        }
    };
</script>

<style scoped>
    .content-title {
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .pre-img {
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo {
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn {
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-input {
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
    .container{
        text-align: center;
    }
</style>